<template>
  <scroll-list
    ref="scrollList"
    :height="`calc(100vh - 172rpx - ${$util.getStatusBarHeight()})`"
    @getData="getData"
    :slotData="{ myAllRead, role,colors }"
  >
    <template v-slot="{ item, index, slotData }">
      <view class="item" @click="goDetail(item, index)">
        <view class="left">
          <text v-if="item.type == 2" class="iconfont icon-yisheng" />
          <text v-else-if="item.type == 1" class="iconfont icon-jinggao" style="color: #ffd940" />
          <text v-else class="iconfont icon-huli" />
          <view :style="{color:item.level?slotData.colors[item.level-1]:''}">{{ item.content }}</view>
        </view>
        <text class="time">{{ item.sendTimeShow }}</text>
        <view class="no-read" v-if="item.type != 2 && !slotData.myAllRead && !item.isRead"
          >{{ slotData.role != 5 ? "患者" : "" }}未读</view
        >
        <view v-if="slotData.role != 5 && item.type == 2" :class="['handle', !item.isHandle ? 'complete' : '']">
          {{ !item.isHandle ? "待处理" : `已处理` }}
        </view>
      </view>
    </template>
  </scroll-list>
</template>

<script>
import basicsList from "@/components/basics-list/basics-list.vue";

export default {
  name: "my-list",
  props: {
    type: {
      type: Number,
      default: -1,
    },
    patientId: {
      type: String,
      default: "",
    },
    allRead: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    basicsList,
  },
  data() {
    return {
      role: uni.getStorageSync("role"),
	  colors:['#409EFF','rgb(253,154,1)','red'],//警告颜色
      myAllRead: false,
    };
  },
  watch: {
    allRead(val) {
      this.myAllRead = val;
    },
  },
  created(options) {
    this.$nextTick(() => {
      this.$refs.scrollList.getData(1);
    });
  },
  methods: {
    refresh() {
      this.$refs.scrollList.getData(2);
    },
    getData(param) {
      if (this.type < 0) {
        return;
      }
      this.$api
        .doctorRemindList({ patientId: this.patientId, pageNum: param.pageNo, pageSize: 20, type: this.type })
        .then((res) => {
          if (param.pageNo == 1) {
            this.myAllRead = false;
          }
          if (res.code == 200) {
            let list = res.rows.map((item) => {
              if (new Date().getFullYear() == new Date(item.sendTime.replace(/-/g, "/")).getFullYear()) {
                item.sendTimeShow = item.sendTime.substring(5, 16);
              } else {
                item.sendTimeShow = item.sendTime.substring(0, 10);
              }
              if (item.handleTime) {
                if (new Date().getFullYear() == new Date(item.handleTime.replace(/-/g, "/")).getFullYear()) {
                  item.handleTimeShow = item.handleTime.substring(5, 16);
                } else {
                  item.handleTimeShow = item.handleTime.substring(0, 10);
                }
              }
              return item;
            });
            this.$refs.scrollList.setData(list, param.pageNo * 20 >= res.total);
          } else {
            this.$refs.scrollList.setData(false, false);
          }
        });
    },
    goDetail(item, index) {
      if (this.role == 5 && !this.myAllRead && !item.isRead) {
        this.$util.requestLodingType = false;
        this.$api.patientUpdateRemindRead({ reId: item.reId }).then((res) => {
          if (res.code == 200) {
            item.isRead = true;
            this.$refs.scrollList.changeItem(index, item);
          }
        });
      }

      uni.setStorage({
        key: "tipsDetail",
        data: item,
        success: () => {
          this.$util.goUrl("/pagesPatient/tipsDetail/index?isDetail=1&type=" + item.type);
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.item {
  width: 100vw;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1rpx solid $default-border-color;
  display: flex;
  justify-content: space-between;
  padding: 40rpx;
  align-items: center;
  position: relative;
  .left {
    display: flex;
    align-items: center;
    .iconfont {
      margin-right: 20rpx;
    }
    view {
      width: 420rpx;
      justify-content: space-between;
      text-overflow: ellipsis;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .time {
    font-size: $small-font-size;
    color: $font-grey-color;
  }
  .no-read {
    font-size: $litte-font-size;
    position: absolute;
    right: 20rpx;
    top: 4rpx;
    color: $theme-color;
    padding: 0rpx 10rpx;
  }
  .handle {
    color: $font-grey-color;

    font-size: $small-font-size;
    position: absolute;
    right: 40rpx;
    bottom: 4rpx;
  }
  .complete {
    color: #e83112;
  }
}
.item::after {
  content: "";
  height: 1rpx;
  width: 40rpx;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
}
</style>
